<!DOCTYPE html>
<html>
<head>
  <title>Framework7 Icons v0.8.9 Cheatsheet</title>
  <link href="css/framework7-icons.css" rel="stylesheet" type="text/css" />
  <style>
    {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    body {
      background: #fff;
      color: #333;
      font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: 0;
    }
    header {
      text-align: center;
      border-bottom: 1px solid #eee;
      margin-bottom: 20px;
      overflow: hidden;
      padding: 20px 0;
    }
    header h1 {
      font-size: 21px;
      font-weight: 400;
    }
    .center {
      margin-left: auto;
      margin-right: auto;
      max-width: 960px;
    }
    .icons {
      overflow: hidden;
    }
    .content .icon-cell .f7-icons {
      cursor: pointer;
    }
    .content {
      padding-bottom: 250px;
    }
    .icons .icon-cell {
      float: left;
      width: 12.5%;
      text-align: center;
      height: 100px;
      margin-top: 30px;
    }
    .icons .icon-name, .icons .icon-size {
      display: block;
      font-size: 11px;
      color: #666;
      margin-top: 10px;
    }
    .f7-icons.size-14 {
      font-size: 14px;
    }
    .f7-icons.size-16 {
      font-size: 16px;
    }
    .f7-icons.size-18 {
      font-size: 18px;
    }
    .f7-icons.size-22 {
      font-size: 22px;
    }
    .f7-icons.size-25 {
      font-size: 25px;
    }
    .f7-icons.size-29 {
      font-size: 29px;
    }
    .f7-icons.size-50 {
      font-size: 50px;
    }
    .f7-icons.size-100 {
      font-size: 100px;
    }
    .icon-preview {
      box-shadow: 0px -10px 20px rgba(0,0,0,0.3);
      background: #fff;
      position: fixed;
      bottom: 0;
      left: 50%;
      margin-left: -480px;
      z-index: 100;
      width: 960px;
      display: none;
    }
    @media (max-width: 960px) {
      .icon-preview {
        left: 0;
        width: 100%;
        margin-left: 0;
      }
    }
    .icon-preview .icons {
      font-size: 0;
      padding-bottom: 10px;
    }
    .icon-preview .icon-cell {
      float: none;
      display: inline-block;
      margin: 0;
      vertical-align: bottom;
      height: auto;
    }
    .icon-preview .icon-preview-name {
      font-size: 18px;
      padding: 10px;
      border-bottom: 1px solid #eee;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="center">
    <header>
      <h1>Framework7 Icons v0.8.9 Cheatsheet, <b>256</b> icons:</h1>
    </header>
    <div class="content">
      <div class="icons">
        <div class="icon-cell">
  <i class="f7-icons size-50">add</i>
  <span class="icon-name">add</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">add_round</i>
  <span class="icon-name">add_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">add_round_fill</i>
  <span class="icon-name">add_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">alarm</i>
  <span class="icon-name">alarm</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">alarm_fill</i>
  <span class="icon-name">alarm_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">albums</i>
  <span class="icon-name">albums</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">albums_fill</i>
  <span class="icon-name">albums_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">arrow_down</i>
  <span class="icon-name">arrow_down</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">arrow_down_fill</i>
  <span class="icon-name">arrow_down_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">arrow_left</i>
  <span class="icon-name">arrow_left</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">arrow_left_fill</i>
  <span class="icon-name">arrow_left_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">arrow_right</i>
  <span class="icon-name">arrow_right</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">arrow_right_fill</i>
  <span class="icon-name">arrow_right_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">arrow_up</i>
  <span class="icon-name">arrow_up</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">arrow_up_fill</i>
  <span class="icon-name">arrow_up_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">at</i>
  <span class="icon-name">at</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">at_fill</i>
  <span class="icon-name">at_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bag</i>
  <span class="icon-name">bag</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bag_fill</i>
  <span class="icon-name">bag_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bars</i>
  <span class="icon-name">bars</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bell</i>
  <span class="icon-name">bell</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bell_fill</i>
  <span class="icon-name">bell_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bolt</i>
  <span class="icon-name">bolt</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bolt_fill</i>
  <span class="icon-name">bolt_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bolt_round</i>
  <span class="icon-name">bolt_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bolt_round_fill</i>
  <span class="icon-name">bolt_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">book</i>
  <span class="icon-name">book</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">book_fill</i>
  <span class="icon-name">book_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bookmark</i>
  <span class="icon-name">bookmark</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">bookmark_fill</i>
  <span class="icon-name">bookmark_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">box</i>
  <span class="icon-name">box</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">box_fill</i>
  <span class="icon-name">box_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">briefcase</i>
  <span class="icon-name">briefcase</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">briefcase_fill</i>
  <span class="icon-name">briefcase_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">calendar</i>
  <span class="icon-name">calendar</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">calendar_fill</i>
  <span class="icon-name">calendar_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">camera</i>
  <span class="icon-name">camera</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">camera_fill</i>
  <span class="icon-name">camera_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">card</i>
  <span class="icon-name">card</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">card_fill</i>
  <span class="icon-name">card_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">chat</i>
  <span class="icon-name">chat</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">chat_fill</i>
  <span class="icon-name">chat_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">chats</i>
  <span class="icon-name">chats</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">chats_fill</i>
  <span class="icon-name">chats_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">check</i>
  <span class="icon-name">check</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">check_round</i>
  <span class="icon-name">check_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">check_round_fill</i>
  <span class="icon-name">check_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">chevron_down</i>
  <span class="icon-name">chevron_down</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">chevron_left</i>
  <span class="icon-name">chevron_left</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">chevron_right</i>
  <span class="icon-name">chevron_right</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">chevron_up</i>
  <span class="icon-name">chevron_up</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">circle</i>
  <span class="icon-name">circle</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">circle_fill</i>
  <span class="icon-name">circle_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">circle_half</i>
  <span class="icon-name">circle_half</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">close</i>
  <span class="icon-name">close</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">close_round</i>
  <span class="icon-name">close_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">close_round_fill</i>
  <span class="icon-name">close_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">cloud</i>
  <span class="icon-name">cloud</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">cloud_download</i>
  <span class="icon-name">cloud_download</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">cloud_download_fill</i>
  <span class="icon-name">cloud_download_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">cloud_fill</i>
  <span class="icon-name">cloud_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">cloud_upload</i>
  <span class="icon-name">cloud_upload</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">cloud_upload_fill</i>
  <span class="icon-name">cloud_upload_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">collection</i>
  <span class="icon-name">collection</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">collection_fill</i>
  <span class="icon-name">collection_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">compass</i>
  <span class="icon-name">compass</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">compass_fill</i>
  <span class="icon-name">compass_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">compose</i>
  <span class="icon-name">compose</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">compose_fill</i>
  <span class="icon-name">compose_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">data</i>
  <span class="icon-name">data</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">data_fill</i>
  <span class="icon-name">data_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">delete</i>
  <span class="icon-name">delete</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">delete_round</i>
  <span class="icon-name">delete_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">delete_round_fill</i>
  <span class="icon-name">delete_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">document</i>
  <span class="icon-name">document</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">document_fill</i>
  <span class="icon-name">document_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">document_text</i>
  <span class="icon-name">document_text</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">document_text_fill</i>
  <span class="icon-name">document_text_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">down</i>
  <span class="icon-name">down</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">download</i>
  <span class="icon-name">download</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">download_fill</i>
  <span class="icon-name">download_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">download_round</i>
  <span class="icon-name">download_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">download_round_fill</i>
  <span class="icon-name">download_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">drawer</i>
  <span class="icon-name">drawer</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">drawer_fill</i>
  <span class="icon-name">drawer_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">drawers</i>
  <span class="icon-name">drawers</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">drawers_fill</i>
  <span class="icon-name">drawers_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">email</i>
  <span class="icon-name">email</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">email_fill</i>
  <span class="icon-name">email_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">eye</i>
  <span class="icon-name">eye</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">eye_fill</i>
  <span class="icon-name">eye_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">fastforward</i>
  <span class="icon-name">fastforward</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">fastforward_fill</i>
  <span class="icon-name">fastforward_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">fastforward_round</i>
  <span class="icon-name">fastforward_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">fastforward_round_fill</i>
  <span class="icon-name">fastforward_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">favorites</i>
  <span class="icon-name">favorites</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">favorites_fill</i>
  <span class="icon-name">favorites_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">film</i>
  <span class="icon-name">film</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">film_fill</i>
  <span class="icon-name">film_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">filter</i>
  <span class="icon-name">filter</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">filter-fill</i>
  <span class="icon-name">filter-fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">flag</i>
  <span class="icon-name">flag</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">flag_fill</i>
  <span class="icon-name">flag_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">folder</i>
  <span class="icon-name">folder</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">folder_fill</i>
  <span class="icon-name">folder_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">forward</i>
  <span class="icon-name">forward</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">forward_fill</i>
  <span class="icon-name">forward_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">gear</i>
  <span class="icon-name">gear</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">gear_fill</i>
  <span class="icon-name">gear_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">graph_round</i>
  <span class="icon-name">graph_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">graph_round_fill</i>
  <span class="icon-name">graph_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">graph_square</i>
  <span class="icon-name">graph_square</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">graph_square_fill</i>
  <span class="icon-name">graph_square_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">heart</i>
  <span class="icon-name">heart</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">heart_fill</i>
  <span class="icon-name">heart_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">help</i>
  <span class="icon-name">help</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">help_fill</i>
  <span class="icon-name">help_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">home</i>
  <span class="icon-name">home</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">home_fill</i>
  <span class="icon-name">home_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">images</i>
  <span class="icon-name">images</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">images_fill</i>
  <span class="icon-name">images_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">info</i>
  <span class="icon-name">info</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">info_fill</i>
  <span class="icon-name">info_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">keyboard</i>
  <span class="icon-name">keyboard</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">keyboard_fill</i>
  <span class="icon-name">keyboard_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">layers</i>
  <span class="icon-name">layers</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">layers_fill</i>
  <span class="icon-name">layers_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">left</i>
  <span class="icon-name">left</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">list</i>
  <span class="icon-name">list</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">list_fill</i>
  <span class="icon-name">list_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">lock</i>
  <span class="icon-name">lock</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">lock_fill</i>
  <span class="icon-name">lock_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">login</i>
  <span class="icon-name">login</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">login_fill</i>
  <span class="icon-name">login_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">logout</i>
  <span class="icon-name">logout</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">logout_fill</i>
  <span class="icon-name">logout_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">menu</i>
  <span class="icon-name">menu</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">mic</i>
  <span class="icon-name">mic</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">mic_fill</i>
  <span class="icon-name">mic_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_dollar</i>
  <span class="icon-name">money_dollar</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_dollar_fill</i>
  <span class="icon-name">money_dollar_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_euro</i>
  <span class="icon-name">money_euro</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_euro_fill</i>
  <span class="icon-name">money_euro_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_pound</i>
  <span class="icon-name">money_pound</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_pound_fill</i>
  <span class="icon-name">money_pound_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_rubl</i>
  <span class="icon-name">money_rubl</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_rubl_fill</i>
  <span class="icon-name">money_rubl_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_yen</i>
  <span class="icon-name">money_yen</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">money_yen_fill</i>
  <span class="icon-name">money_yen_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">more</i>
  <span class="icon-name">more</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">more_round</i>
  <span class="icon-name">more_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">more_round_fill</i>
  <span class="icon-name">more_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">more_vertical</i>
  <span class="icon-name">more_vertical</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">more_vertical_round</i>
  <span class="icon-name">more_vertical_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">more_vertical_round_fill</i>
  <span class="icon-name">more_vertical_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">navigation</i>
  <span class="icon-name">navigation</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">navigation_fill</i>
  <span class="icon-name">navigation_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">paper_plane</i>
  <span class="icon-name">paper_plane</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">paper_plane_fill</i>
  <span class="icon-name">paper_plane_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">pause</i>
  <span class="icon-name">pause</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">pause_fill</i>
  <span class="icon-name">pause_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">pause_round</i>
  <span class="icon-name">pause_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">pause_round_fill</i>
  <span class="icon-name">pause_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">person</i>
  <span class="icon-name">person</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">person_fill</i>
  <span class="icon-name">person_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">persons</i>
  <span class="icon-name">persons</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">persons_fill</i>
  <span class="icon-name">persons_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">phone</i>
  <span class="icon-name">phone</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">phone_fill</i>
  <span class="icon-name">phone_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">phone_round</i>
  <span class="icon-name">phone_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">phone_round_fill</i>
  <span class="icon-name">phone_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">photos</i>
  <span class="icon-name">photos</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">photos_fill</i>
  <span class="icon-name">photos_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">pie</i>
  <span class="icon-name">pie</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">pie_fill</i>
  <span class="icon-name">pie_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">play</i>
  <span class="icon-name">play</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">play_fill</i>
  <span class="icon-name">play_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">play_round</i>
  <span class="icon-name">play_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">play_round_fill</i>
  <span class="icon-name">play_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">radio</i>
  <span class="icon-name">radio</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">redo</i>
  <span class="icon-name">redo</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">refresh</i>
  <span class="icon-name">refresh</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">refresh_round</i>
  <span class="icon-name">refresh_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">refresh_round_fill</i>
  <span class="icon-name">refresh_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">reload</i>
  <span class="icon-name">reload</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">reload_round</i>
  <span class="icon-name">reload_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">reload_round_fill</i>
  <span class="icon-name">reload_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">reply</i>
  <span class="icon-name">reply</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">reply_fill</i>
  <span class="icon-name">reply_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">rewind</i>
  <span class="icon-name">rewind</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">rewind_fill</i>
  <span class="icon-name">rewind_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">rewind_round</i>
  <span class="icon-name">rewind_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">rewind_round_fill</i>
  <span class="icon-name">rewind_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">right</i>
  <span class="icon-name">right</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">search</i>
  <span class="icon-name">search</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">search_strong</i>
  <span class="icon-name">search_strong</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">settings</i>
  <span class="icon-name">settings</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">settings_fill</i>
  <span class="icon-name">settings_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">share</i>
  <span class="icon-name">share</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">share_fill</i>
  <span class="icon-name">share_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_facebook</i>
  <span class="icon-name">social_facebook</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_facebook_fill</i>
  <span class="icon-name">social_facebook_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_github</i>
  <span class="icon-name">social_github</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_github_fill</i>
  <span class="icon-name">social_github_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_googleplus</i>
  <span class="icon-name">social_googleplus</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_instagram</i>
  <span class="icon-name">social_instagram</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_instagram_fill</i>
  <span class="icon-name">social_instagram_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_linkedin</i>
  <span class="icon-name">social_linkedin</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_linkedin_fill</i>
  <span class="icon-name">social_linkedin_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_rss</i>
  <span class="icon-name">social_rss</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_rss_fill</i>
  <span class="icon-name">social_rss_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_twitter</i>
  <span class="icon-name">social_twitter</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">social_twitter_fill</i>
  <span class="icon-name">social_twitter_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">sort</i>
  <span class="icon-name">sort</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">sort_fill</i>
  <span class="icon-name">sort_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">star</i>
  <span class="icon-name">star</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">star_fill</i>
  <span class="icon-name">star_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">star_half</i>
  <span class="icon-name">star_half</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">stopwatch</i>
  <span class="icon-name">stopwatch</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">stopwatch_fill</i>
  <span class="icon-name">stopwatch_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">tabs</i>
  <span class="icon-name">tabs</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">tabs_fill</i>
  <span class="icon-name">tabs_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">tags</i>
  <span class="icon-name">tags</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">tags_fill</i>
  <span class="icon-name">tags_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">tape</i>
  <span class="icon-name">tape</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">tape_fill</i>
  <span class="icon-name">tape_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">ticket</i>
  <span class="icon-name">ticket</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">ticket_fill</i>
  <span class="icon-name">ticket_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">time</i>
  <span class="icon-name">time</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">time_fill</i>
  <span class="icon-name">time_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">timer</i>
  <span class="icon-name">timer</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">timer_fill</i>
  <span class="icon-name">timer_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">today</i>
  <span class="icon-name">today</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">today_fill</i>
  <span class="icon-name">today_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">trash</i>
  <span class="icon-name">trash</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">trash_fill</i>
  <span class="icon-name">trash_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">tune</i>
  <span class="icon-name">tune</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">tune_fill</i>
  <span class="icon-name">tune_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">undo</i>
  <span class="icon-name">undo</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">unlock</i>
  <span class="icon-name">unlock</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">unlock_fill</i>
  <span class="icon-name">unlock_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">up</i>
  <span class="icon-name">up</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">videocam</i>
  <span class="icon-name">videocam</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">videocam_fill</i>
  <span class="icon-name">videocam_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">videocam_round</i>
  <span class="icon-name">videocam_round</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">videocam_round_fill</i>
  <span class="icon-name">videocam_round_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">volume</i>
  <span class="icon-name">volume</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">volume_fill</i>
  <span class="icon-name">volume_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">volume_low</i>
  <span class="icon-name">volume_low</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">volume_low_fill</i>
  <span class="icon-name">volume_low_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">volume_mute</i>
  <span class="icon-name">volume_mute</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">volume_mute_fill</i>
  <span class="icon-name">volume_mute_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">world</i>
  <span class="icon-name">world</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">world_fill</i>
  <span class="icon-name">world_fill</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">zoom_in</i>
  <span class="icon-name">zoom_in</span>
</div>
<div class="icon-cell">
  <i class="f7-icons size-50">zoom_out</i>
  <span class="icon-name">zoom_out</span>
</div>
      </div>
    </div>
  </div>
  <div class="icon-preview">
    <div class="icon-preview-name">Icon: <b>home</b></div>
    <div class="icons">
      <div class="icon-cell">
        <div class="f7-icons size-14">home</div>
        <div class="icon-size">14px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-16">home</div>
        <div class="icon-size">16px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-18">home</div>
        <div class="icon-size">18px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-22">home</div>
        <div class="icon-size">22px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-25">home</div>
        <div class="icon-size">25px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-29">home</div>
        <div class="icon-size">29px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-50">home</div>
        <div class="icon-size">50px</div>
      </div>
      <div class="icon-cell">
        <div class="f7-icons size-100">home</div>
        <div class="icon-size">100px</div>
      </div>
    </div>
  </div>
  <script>
    var icons = document.querySelectorAll('.content .f7-icons');
    function showPreview(e) {
      var icon = e.target.textContent;
      var previewIcons = document.querySelectorAll('.icon-preview .f7-icons');
      for (var j = 0; j < previewIcons.length; j++) {
        previewIcons[j].textContent = icon;
      }
      document.querySelector('.icon-preview').style.display = 'block';
      document.querySelector('.icon-preview-name b').textContent = icon;
    }
    for (var i = 0; i < icons.length; i++) {
      icons[i].addEventListener('click', showPreview);
    }
  </script>
</body>
</html>